:root {
  --device-width: 770px;
  --device-height: 1336px;
  --ui-width: 640px;
  font-size: 15px;
}

* {
  padding: 0;
  margin: 0;
}

html {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  --progress: 0;
}

img {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  pointer-events: none;
}

#face {
  transform: translate(-89px, -109px);
  z-index: 2;
}

#hair-1-1 {
  transform: translate(-86px, calc(-138px - 280px));
  opacity: 0;

  &.in-enter {
    transform: translate(-86px, calc(-138px - 280px * (1 - var(--progress))));
    opacity: calc(var(--progress) * 1.5);
  }

  &.in-leave {
    transform: translate(-86px, -138px);
    opacity: 1;
  }

  &.out-enter {
    transform: translate(-86px, -138px);
    opacity: calc(1 - var(--progress));
  }

  &.out-leave {
    transform: translate(-86px, -138px);
    opacity: 0;
  }
}

#hair-1-2 {
  transform: translate(-98px, calc(43px + 200px));
  opacity: 0;
  z-index: 1;

  &.in-enter {
    transform: translate(-98px, calc(43px + 200px * (1 - var(--progress))));
    opacity: calc(var(--progress) * 1.5);
  }

  &.in-leave {
    transform: translate(-98px, 43px);
    opacity: 1;
  }

  &.out-enter {
    transform: translate(-98px, 43px);
    opacity: calc(1 - var(--progress));
  }

  &.out-leave {
    transform: translate(-98px, 43px);
    opacity: 0;
  }
}

#hair-1-3 {
  transform: translate(50px, calc(43px + 200px));
  opacity: 0;
  z-index: 1;

  &.in-enter {
    transform: translate(50px, calc(43px + 200px * (1 - var(--progress))));
    opacity: calc(var(--progress) * 1.5);
  }

  &.in-leave {
    transform: translate(50px, 43px);
    opacity: 1;
  }

  &.out-enter {
    transform: translate(50px, 43px);
    opacity: calc(1 - var(--progress));
  }

  &.out-leave {
    transform: translate(50px, 43px);
    opacity: 0;
  }
}

#hair-2 {
  transform: translate(-113px, calc(-120px - 280px));
  opacity: 0;

  &.in-enter {
    transform: translate(-113px, calc(-120px - 280px * (1 - var(--progress))));
    opacity: calc(var(--progress) * 1.5);
  }

  &.in-leave {
    transform: translate(-113px, -120px);
    opacity: 1;
  }

  &.out-enter {
    transform: translate(-113px, -120px);
    opacity: calc(1 - var(--progress));
  }

  &.out-leave {
    transform: translate(-113px, -120px);
    opacity: 0;
  }
}

#hair-3 {
  transform: translate(-128px, calc(-115px - 280px));
  opacity: 0;

  &.in-enter {
    transform: translate(-128px, calc(-115px - 280px * (1 - var(--progress))));
    opacity: calc(var(--progress) * 1.5);
  }

  &.in-leave {
    transform: translate(-128px, -115px);
    opacity: 1;
  }

  &.out-enter {
    transform: translate(-128px, -115px);
    opacity: calc(1 - var(--progress));
  }

  &.out-leave {
    transform: translate(-128px, -115px);
    opacity: 0;
  }
}

#scroller {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;

  & > #scroll-item {
    height: calc(100% + 4000px);
  }
}

.indicator {
  position: absolute;
  right: 0;
  width: 10px;
  height: 2px;
  background-color: red;
  pointer-events: none;
  z-index: 2;
}
